<template>
    <view class="card" :style="style">
        <slot name="header">
            <view class="card-header" v-if="!!title">
                <view class="title"> {{ title }}</view>
            </view>
        </slot>
        <view class="card-body" :style="bodyStyle">
            <slot></slot>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        title: String,
        style:String,
        bodyStyle:String,
    },
    mounted() {
        console.log(this.bodyStyle)
    },
}
</script>

<style lang="scss">
.card {
    margin: 12px 16px;
    padding:12px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 0px #D9D8D8;
    background: #FFFFFF;
    overflow: hidden;

    .card-header {
        .title {
            height: 22px;
            font-size: 16px;
            font-weight: bold;
            color: #222222;
            line-height: 19px;
        }
    }
    .card-body {
    }
}
</style>